<script lang="ts" setup>
import { ref, Ref } from 'vue'

const bgBackground = "https://shq.qdjqy.cn/profile/0911/personal/bg_background.png"
const bgCard = "https://shq.qdjqy.cn/profile/0911/personal/bg_card.png"
const iconAvatar = "https://shq.qdjqy.cn/profile/0911/personal/icon_avatar.png"
const iconXiugai = "https://shq.qdjqy.cn/profile/0911/personal/icon_xiugai.png"
const iconRight = "https://shq.qdjqy.cn/profile/0911/personal/icon_right.png"
const liCart = "https://shq.qdjqy.cn/profile/0911/personal/li_cart.png"
const liYouhui = "https://shq.qdjqy.cn/profile/0911/personal/li_youhui.png"
const liYuyue = "https://shq.qdjqy.cn/profile/0911/personal/li_yuyue.png"
const funGognhui = "https://shq.qdjqy.cn/profile/0911/personal/fun_gognhui.png"
const funAbout = "https://shq.qdjqy.cn/profile/0911/personal/fun_about.png"
const funMsg = "https://shq.qdjqy.cn/profile/0911/personal/fun_msg.png"
const funPhone = "https://shq.qdjqy.cn/profile/0911/personal/fun_phone.png"

definePage({
  style: {
    navigationStyle: 'custom'
  }
})

function isWritting() {
  uni.showToast({
    title: '正在开发中',
    icon: 'none',
    duration: 2000
  })
}

function jump(url: string) {
  uni.navigateTo({ url });
}
</script>

<template>
  <view class="personal-container">
    <image class="bg-img" :src="bgBackground" mode="aspectFill" />
    <view class="block"></view>

    <view class="user flex">
      <image :src="iconAvatar" mode="widthFix" class="avatar"></image>
      <view class="right">
        <view class="top">
          <span class="name">微信用户</span>
          <image :src="iconXiugai" mode="widthFix" class="icon"></image>
        </view>
        <view class="info">旅行在于不断发现新的世界和新的自己</view>
      </view>
    </view>
    <view class="card" @click="jump('/pages/cardBag/index')">
      <image class="bg-card" :src="bgCard" mode="aspectFill"></image>
      <view class="flex" style="justify-content: space-between;">
        <view class="status">
          状态: <span>未绑定</span>
        </view>
        <view>
          <span class="tip">我的卡包</span>
          <image :src="iconRight" mode="aspectFill" class="icon-right"></image>
        </view>
      </view>
    </view>

    <view class="card-container">
      <wd-grid :column="3" clickable>
        <wd-grid-item text="购买记录" @itemclick="jump('/pages/order/index')">
          <template #icon>
            <image class="slot-img" :src="liCart" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="我的预约" @itemclick="jump('/pages/reserved/index')">
          <template #icon>
            <image class="slot-img" :src="liYuyue" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="我的卡券" @itemclick="jump('/pages/coupon/index')">
          <template #icon>
            <image class="slot-img" :src="liYouhui" mode="aspectFill"/>
          </template>
        </wd-grid-item>
      </wd-grid>
    </view>
    <view class="card-container">
      <view class="title">更多功能</view>
      <wd-grid :column="4" clickable>
        <wd-grid-item text="工会福利" @itemclick="isWritting">
          <template #icon>
            <image class="slot-img2" :src="funGognhui" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="关于我们" @itemclick="isWritting">
          <template #icon>
            <image class="slot-img2" :src="funAbout" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="意见反馈" @itemclick="jump('/pages/suggest/index')">
          <template #icon>
            <image class="slot-img2" :src="funMsg" mode="aspectFill"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="联系客服" @itemclick="isWritting">
          <template #icon>
            <image class="slot-img2" :src="funPhone" mode="aspectFill"/>
          </template>
        </wd-grid-item>
      </wd-grid>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.personal-container {
  & .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 380rpx;
    z-index: -1; 
    vertical-align: top;
  }
  & .block {
    height: 160rpx;
    width: 750rpx;
  }
  & .user {
    height: 120rpx;
    width: 750rpx;
    // 
    & .avatar {
      height: 120rpx;
      width: 120rpx;
      margin: 0 30rpx;
    }
    & .right {
      & .top {
        height: 65rpx;
        // border: 1px solid #e60012;
        line-height: 65rpx;
        & .name {
          font-size: 38rpx;
          font-weight: 700;
          color: #333;
          margin-right: 16rpx;
        }
        & .icon {
          width: 34rpx;
          height: 34rpx;
        }
      }
      & .info {
        font-size: 30rpx;
        color: #999;
        line-height: 55rpx;
      }
    }
  }
  .card {
    width: 690rpx;
    height: 120rpx;
    margin: 40rpx 30rpx;
    position: relative;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0 40rpx;
    box-sizing: border-box;
    .bg-card {
      position: absolute;
      top: 0;
      left: 0;
      width: 690rpx;
      height: 120rpx;
      z-index: -1; 
      vertical-align: top;
    }
    & .status {
      font-weight: 600;
      color: #662512;
      line-height: 120rpx;
      font-size: 34rpx;
    }
    & .tip {
      font-weight: 500;
      color: #662512;
      line-height: 120rpx;
      font-size: 32rpx;
      margin-right: 10rpx;
    }
    & .icon-right {
      width: 34rpx;
      height: 34rpx;
      margin-top: -5rpx;
    }
  }

  .card-container {
    width: 690rpx;
    margin: 30rpx 30rpx;
    border-radius: 24rpx;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    & .slot-img {
      width: 120rpx;
      height: 120rpx;
    }
    & .title {
      font-size: 32rpx;
      font-weight: 700;
      padding: 30rpx 0 20rpx 30rpx;
    }
    & .slot-img2 {
      width: 80rpx;
      height: 80rpx;
    }
  }
}
</style>
